<template>
  <div>
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="handleQuery" @clear="clear" />
    <el-button type="primary" class="mb20" @click="handleImpower">抖音账号授权</el-button>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-tableb">
      <el-table-column align="center" :label="translate('loginAccount')" min-width="100" prop="userName" show-overflow-tooltip />
      <el-table-column align="center" label="用户呢称" min-width="120" prop="nickName" show-overflow-tooltip />
      <el-table-column align="center" :label="translate('realname')" min-width="100" prop="realName" show-overflow-tooltip />
      <el-table-column align="center" :label="translate('phone')" min-width="100" prop="phone" show-overflow-tooltip />
      <el-table-column align="center" label="抖音头像" min-width="100" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <el-image fit="contain" style="width: 40px" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="抖音呢称" min-width="100" prop="dyNickName" show-overflow-tooltip />
      <el-table-column align="center" label="授权时间" min-width="150" prop="authTime" show-overflow-tooltip />
      <el-table-column align="center" label="授权到期时间" min-width="150" prop="expireTime" show-overflow-tooltip />

      <el-table-column align="center" :label="translate('handle')" min-width="120" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button type="text" @click="handleCancel(scope.row)">{{ translate("cancel") }}关联</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :total="totalCount" :page="pagination.page" @current-change="currentPageChange" @SizeChange="pageSizeChange" />
    <el-dialog :close-on-click-modal="modalDialog" :lose-on-press-escape="modalDialog" title="分享视频到抖音" :visible.sync="isOpenPub" width="800px">
      <el-form ref="modal" :model="param" label-width="auto">
        <el-form-item label="视频来源">
          <el-select>
            <el-options label="上传视频" value="1" />
            <el-options label="精彩视频" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item :label="translate('title')">
          <el-input />
        </el-form-item>
        <el-form-item label="封面" />
        <el-form-item label="地理位置">
          <el-input />
        </el-form-item>
        <el-form-item label="视频简介">
          <el-input v-model="param.remarks" class="w400" type="textarea" placeholder="请输入视频简介" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  DyImpower,
  DyImpowerPage,
  DyImpowerCancel,
  DyImpowerGetToken
} from '@/api'
export default {
  data () {
    return {
      filters: {},
      pagination: {
        rows: 10,
        page: 1
      },
      list: [],
      totalCount: 0,
      listLoading: false,

      isOpenPub: false,
      param: {},

      modalDialog: this.$store.state.app.dialog,
      queryFormConfig: {
        formItems: [
          {
            filed: 'userName',
            type: 'input',
            label: '登录账号'
          },
          {
            filed: 'phone',
            type: 'input',
            label: '手机号'
          }
        ],
        online: true
      },
      limitIndex: 0
    }
  },
  created () {
    this.getList()
    // const code = this.$route.query.code || ''
    // if (this.limitIndex === 0 && code) {
    //   DyImpowerGetToken({ param: { code }})
    //   this.limitIndex = this.limitIndex + 1
    // }
  },
  methods: {
    handleCancel (row) {
      DyImpowerCancel({ param: { id: row.id } }).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success('取消关联成功')
        this.getList()
      })
    },
    handleImpower () {
      DyImpowerPage({ param: {} }).then(res => {
        if (res.errorCode !== '000000') return
        window.open(res.record, '_blank')
      })
    },
    getList () {
      const { filters, pagination } = this
      this.listLoading = true
      DyImpower({ param: filters, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    handleQuery () {
      this.pagination.page = 1
      this.getList()
    },
    clear () {
      this.filters = {}
      this.handleQuery()
    },
    currentPageChange (val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange (val) {
      this.pagination.rows = val
      this.getList()
    }
  }
}
</script>

<style>
</style>
